"use client";

import ForumItem from "@/app/[language]/forum/components/ForumItem";
import useGetForums from "@/app/[language]/forums/query/useGetForums";
import { useParams } from "next/navigation";
import { useEffect, useState } from "react";
import { Col, Row } from "reactstrap";
import { useWindowArea } from "taehui-ts/fe-utilities";

export default function Page() {
  const [table, setTable] = useState(1);

  const { windowLength } = useWindowArea();

  useEffect(() => {
    setTable(windowLength < 992 ? 1 : 2);
  }, [windowLength]);

  const { forumGroup } = useParams<{ forumGroup?: string }>();

  const { data: forums, isFetched: isForumsLoaded } = useGetForums(forumGroup);

  return [...Array(Math.ceil(forums.length / table)).keys()].map((i) => (
    <Row key={i} className="g-0">
      {forums.slice(table * i, table * i + table).map((forum) => (
        <Col key={forum.forumID} className="m-1">
          <ForumItem forum={forum} />
        </Col>
      ))}
    </Row>
  ));
}